<template>
  <div>
    <el-row :gutter="20" style="display: flex">
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;display: flex">左侧占位</el-col>

      <el-col :sm="17" style="display: flex;padding-bottom: 20px">
        <div style="height: 100%;flex: 1">
          <el-card style="background-color: rgba(255,255,255,0.9);height: 100%;padding-bottom: 20px" class="left-item">
            <div slot="header" class="total">
              <div class="titleIndex">
                <i v-if="selected" class="el-icon-back" @click="updateBlogList"></i>
                <span>{{ selectMethod }}</span>
              </div>
              <span>共 <span style="color: #3a8ee6; font-size: 20px">{{ total }}</span> 篇</span>
            </div>

            <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList"
                    :key="blog.id"
                    @click.native="getBlogInfo(blog.id)"
                    shadow="never" class="blog-content"
            >
              <el-col :span="6">
                <el-image
                  style="width: 64px;height: 64px"
                  lazy :src="blog.blogPic"
                >
                </el-image>

                <div
                  :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                  style="font-size: 12px;display: flex;align-items: center">
                  校区
                  <span style="font-size: 12px" class="header">
                      {{ blog.studentName }}
                  </span>
                </div>

                <div>
                  <el-badge v-if="blog.finishState === 1" value="已完结" type="danger" size="medium" class="badge">
                  </el-badge>

                  <el-badge v-else-if="blog.finishState === 3" value="需二次沟通" type="primary" size="medium"
                            class="badge">
                  </el-badge>

                  <el-badge v-else value="进行中" type="success" size="medium" class="badge">
                  </el-badge>
                </div>
              </el-col>

              <el-col :span="11">
                <div style="position: relative">

                  <div v-if="blog.contentType === '1'" style="overflow: hidden;font-size: 12px;margin-bottom: 10px"
                  >
                    <el-input class="no-scrollbar"
                              :class="blog.finishState === 1? 'eventCompletedInput eventCompletedLineInput' : ''"
                              type="textarea" readonly :rows="3"
                              style="width: 500px;max-height: 52px;font-size: 12px;"
                              v-model="blog.content"></el-input>
                  </div>

                  <div v-if="blog.contentType === '2'"
                       style="font-size: 12px;margin-bottom: 10px;display: flex;gap: 4px 10px"
                  >

                    <el-tag effect="dark" size="medium" type="success">班级类型:
                      <span>{{ JSON.parse(blog.content).class_type }}</span>
                    </el-tag>
                    <el-tag effect="dark" size="medium" type="warning">班级编号:
                      <span>{{ JSON.parse(blog.content).class_number }}</span>
                    </el-tag>
                    <el-tag effect="dark" size="medium" type="">班课时间:
                      <span v-for="item in JSON.parse(blog.content).class_time">
                        第 {{ item.number }} 节 :
                        {{ item.time }}</span>
                    </el-tag>
                  </div>

                  <div class="blog-info" :class="blog.finishState === 1? 'eventCompleted' : ''">
                    <div
                      :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                      style="margin-right: 10px">
                      标题
                      <span style="margin-left: 10px;" class="header"> {{ blog.title }}</span>
                    </div>

                    <div
                      :class="blog.finishState === 1? 'eventCompletedLine' : ''">
                      浏览量
                      <span style="margin-left: 10px;"> {{ blog.views }}</span>
                    </div>

                    <div
                      :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                      style="margin-left: 20px">
                      创建人
                      <span style="margin-left: 10px;"> {{ blog.createBy }}</span>
                    </div>
                  </div>

                  <div
                    :class="blog.finishState === 1? 'eventCompleted' : ''"
                    class="blog-info">
                    <div
                      :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                      class="content-class">
                      创建时间:
                      <span style="margin-left: 10px;"> {{ blog.createTime }}</span>
                    </div>

                    <div v-if="blog.contentType === '1'"
                         :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                         class="content-class">
                      标签:
                      <span v-if="blog.tag !==  undefined">
                        {{ blog.tagName }}
                      </span>
                      <span v-else>
                        暂无标签
                      </span>
                    </div>

                    <div v-if="blog.contentType === '2'"
                         :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                         class="content-class">
                      标签:
                      <span>
                        {{ blog.tagName }}
                      </span>
                    </div>

                    <div v-if="blog.contentType === '1'"
                         :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                         class="content-class">
                      分类:
                      <span v-if="blog.type !== undefined"
                      >
                        {{ blog.typeName }}
                      </span>
                      <span v-else>
                        暂无分类
                      </span>
                    </div>

                    <div v-if="blog.contentType === '2'"
                         :class="blog.finishState === 1? 'eventCompletedLine' : ''"
                         class="content-class">
                      分类:
                      <span>
                        {{ blog.typeName }}
                      </span>
                    </div>

                    <div class="content-class"
                         :class="blog.finishState === 1? 'eventCompletedLine' : ''" >
                      内部编号:
                      <span>{{ blog.id }}</span>
                    </div>
                  </div>

                </div>
              </el-col>

              <el-col v-if="blog.contentType === '1'" :span="7" style="padding-left: 10px">
                <div class="blog-info"
                     :class="blog.finishState === 1? 'eventCompletedLine eventCompleted' : ''"
                     style="font-size: 12px">
                  评论列表
                </div>
                <span class="tmp"
                      :class="blog.finishState === 1? 'eventCompletedLine eventCompleted' : ''"
                      v-if="blog.commentLists.length > 0"
                      style="font-size: 12px" v-for="(item,index) in blog.commentLists"
                >
                {{ item }}<br>
              </span>
                <span v-if="blog.commentLists.length === 0"
                      :class="blog.finishState === 1? 'eventCompletedLine eventCompleted' : ''"
                      style="font-size: 12px">
                暂无评论
              </span>
              </el-col>

            </el-row>

            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        background layout="total, sizes, prev, pager, next, jumper" @pagination="getBlogList"
            />
          </el-card>

          <el-empty v-if="total === 0" description="未查询到数据或登陆后查看"></el-empty>
        </div>
      </el-col>

      <el-col :sm="3" style="display: flex">
        <div style="height: 100%">
          <el-card v-if="isLoginState" style="background-color: rgba(255,255,255,0.9)" class="right-item">
            <div slot="header" class="attributes">
              <el-tooltip class="item" effect="dark" content="点击进入系统" placement="top">
                <b @click="handleClick1"
                   style="font-size: 14px;cursor: pointer"
                >欢迎{{ name }}</b>
              </el-tooltip>
            </div>
          </el-card>

          <el-card v-if="false" style="background-color: rgba(255,255,255,0.9)" class="right-item">
            <div slot="header" class="attributes">
              <span style="font-size: 14px;cursor: pointer" @click="getMessagePage">我要留言</span>
            </div>
          </el-card>

          <el-card v-if="isLoginState" style="background-color: rgba(255,255,255,0.9);margin-bottom: 10px">
            <div slot="header" class="attributes">
              <span style="font-size: 14px;cursor: pointer" @click="getRecordPage">我要记录</span>
            </div>
          </el-card>

          <el-card v-if="false" style="background-color: rgba(255,255,255,0.9);margin-bottom: 10px">
            <div slot="header" class="attributes">
              <span style="font-size: 14px;cursor: pointer" @click="templateRecordInput">快捷排课</span>
            </div>
          </el-card>

          <el-card v-if="isLoginState" style="background-color: burlywood;margin-bottom: 10px">
            <div slot="header" class="attributes">
              <span style="font-size: 14px;cursor: pointer" @click="enableAutoRefresh">{{ autoRefreshText }}</span>
            </div>
          </el-card>

          <el-card style="background-color: rgba(255,255,255,0.9)" class="right-item">
            <div slot="header" class="attributes">
              <span style="font-size: 14px;">搜索</span>
            </div>

            <div v-if="searchInput">
              <el-input style="height: 30px;margin-top: 5px;margin-bottom: 10px" clearable @focus="checkInput"
                        @blur="notSearching()" class="search" placeholder="搜索内容"
                        prefix-icon="el-icon-search" v-model="queryParams.query"
              >
              </el-input>
              <ul>
                <li class="animate__animated animate__fadeInDown search-blog" v-for="blog in searchList" :key="blog.id"
                    @click="getBlogInfo(blog.id)"
                >
                  <a><span style="font-size: 12px;white-space: nowrap" v-html="blog.title"></span></a>
                </li>
              </ul>
            </div>
          </el-card>

          <el-card style="background-color: rgba(255,255,255,0.9)" class="right-item">
            <div slot="header">
              <span style="font-size: 14px;cursor: pointer">筛选</span>
            </div>


            <el-select style="width: 100%;height: 30px;margin-top: 5px;margin-bottom: 5px"
                       v-model="queryParams.studentId"
                       @change="searchByPeople($event,1)" placeholder="按校区筛选" filterable clearable
            >
              <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                         :value="item.studentId"
              >
              </el-option>
            </el-select>

            <el-select style="width: 100%;height: 30px;margin-top: 5px;margin-bottom: 5px"
                       v-model="queryParams.finishState"
                       @change="searchByPeople($event,3)" placeholder="按进度状态筛选" filterable clearable
            >
              <el-option v-for="item in stateList" :key="item.id" :label="item.name"
                         :value="item.id"
              >
              </el-option>
            </el-select>

            <el-select style="width: 100%;height: 30px;margin-top: 5px;margin-bottom: 10px"
                       v-model="queryParams.createId"
                       @change="searchByPeople($event,2)" placeholder="按创建人筛选" filterable clearable
            >
              <el-option v-for="item in userList" :key="item.userId" :label="item.nickName"
                         :value="item.userId"
              >
              </el-option>
            </el-select>

            <el-date-picker
              style="margin-bottom: 5px"
              @change="dateChange"
              clearable size="small"
              v-model="queryParams.date"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-card>

          <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
            <div slot="header" class="attributes">
              <span style="font-size: 12px">事件分类</span>
              <span v-if="this.selected1" @click="updateBlogList"
                    style="font-size: 14px;float: right;color: #0000DD;cursor: pointer">清除</span>
            </div>
            <ul class=" blog-type-ul" style="margin-top: 5px;">
              <li style="font-size: 12px" class=" blog-type-li" v-for="cmsType in typeList" :key="cmsType.typeId"
                  @click="selectType(cmsType)"
                  :class="cmsType.typeId === typeId? 'activeType':''"
              >
                <div style="display: flex;align-items: center">
                  <i class="el-icon-collection" style="margin:0 6px;"></i>
                  {{ cmsType.typeName }}
                </div>
                <div>{{ cmsType.blogNum }}</div>
              </li>
            </ul>
            <div v-if="false" class="more" @click="dealType">
              <i v-if="moreType" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
            </div>
          </el-card>

          <el-card style="background-color: rgba(255,255,255,0.9)">
            <div slot="header" class="attributes">
              <b style="font-size: 12px">标签</b>
              <span v-if="this.selected2" @click="updateBlogList"
                    style="font-size: 14px;float: right;color: #0000DD;cursor: pointer">清除</span>
            </div>
            <ul class=" blog-type-ul">
              <li style="font-size: 12px" class=" blog-type-li" v-for="tag in tagList" :key="tag.tagId"
                  @click="selectTag(tag)"
                  :class="tag.tagId === tagId? 'activeTag':''"
              >
                <div style="display: flex;align-items: center">
                  <i class="el-icon-collection" style="margin:0 6px;"></i>
                  {{ tag.tagName }}
                </div>

                <div class="tag">
                  {{ tag.blogNum }}
                </div>
              </li>
            </ul>
            <div v-if="false" class="more" @click="dealTag">
              <i v-if="moreTag" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
            </div>
          </el-card>

        </div>
      </el-col>

      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;display: flex">右侧占位</el-col>
    </el-row>

    <div v-if="!isLoginState" style="cursor: pointer" class="fixed bottom-6 right-6 z-50">
      <button
        class="w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-300 hover:bg-primary-dark hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50"
        @click="handleClick"
      >登陆/注册
        <i class="fa-solid fa-plus text-xl"></i>
      </button>
    </div>

    <!-- 添加或修改文章管理对话框 -->
    <el-dialog title="添加事件" :visible.sync="open" :before-close="cancel" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"/>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <el-form-item label="简介">
              <el-input type="textarea" v-model="form.blogDesc" :autosize="{ minRows: 3, maxRows: 7}" maxlength="50"
                        show-word-limit placeholder="请输入简介"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="内容">
          <el-row style="margin-bottom: 20px;">
            <!--            <Tinymce :height="400" v-model="form.content"></Tinymce>-->
            <el-input type="textarea" :rows="10" v-model="form.content"></el-input>
          </el-row>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <el-form-item label="标签" prop="tagIds">
              <el-checkbox-group v-model="form.tagIds" :max="1" :min="0">
                <el-checkbox v-for="item in tagOptions" :label="item.tagId" :key="item.tagId" :value="item.tagId">
                  {{ item.tagName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="分类" prop="typeIds">
              <el-checkbox-group v-model="form.typeIds" :max="1" :min="0">
                <el-checkbox v-for="item in typeOptions" :label="item.typeId" :key="item.typeId" :value="item.typeName">
                  {{ item.typeName }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="校区" prop="studentId">
              <el-select v-model="form.studentId" @change="getSelectStudent" placeholder="请选择" filterable clearable>
                <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                           :value="item.studentId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="3">
            <el-form-item label="置顶">
              <el-checkbox v-model="top"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="附件">
              <el-upload
                class="upload-demo"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-progress="handleFileUploadProgress"
                :on-remove="handleRemove"
                :on-success="handleUploadSuccess"
                :file-list="fileList"
                :headers="headers"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

              <!--              <files-upload v-model="form.blogFilesNew"></files-upload>-->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="releaseForm">提 交</el-button>
        <el-button type="info" @click="saveForm">暂 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="快捷排课" :visible.sync="templateOpen" width="800px" append-to-body>
      <el-form ref="templateForm" :model="templateForm" :rules="rules" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="templateForm.title" placeholder="请输入标题"/>
        </el-form-item>

        <el-form-item label="校区" prop="studentId">
          <el-select v-model="templateForm.studentId" style="width: 100%"
                     @change="getSelectTemplateStudent" placeholder="请选择" filterable clearable>
            <el-option v-for="item in studentList" :key="item.studentId" :label="item.studentName"
                       :value="item.studentId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级类型" prop="classType">
          <el-select v-model="templateForm.class_type" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="dict in dict.type.event_class_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="班级编号" prop="number">
          <el-input v-model="templateForm.number" placeholder="班级编号"/>
        </el-form-item>

        <el-form-item label="学员程度" prop="student_status">
          <el-select v-model="templateForm.student_status" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="dict in dict.type.event_student_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="标签" prop="tag">
          <el-select v-model="templateForm.tag" style="width: 100%"
                     placeholder="请选择" filterable clearable>
            <el-option v-for="item in tagOptions" :key="item.tagId" :label="item.tagName"
                       :value="item.tagId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="false" label="分类" prop="type">
          <el-select v-model="templateForm.type" style="width: 100%"
                     placeholder="请选择" filterable clearable>
            <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName"
                       :value="item.typeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否建立班级" prop="yesNo">
          <el-select v-model="templateForm.yesNo" style="width: 100%" placeholder="请选择系统中是否已经建立班级"
                     clearable>
            <el-option
              v-for="dict in dict.type.sys_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="特别提示" prop="tips">
          <el-select v-model="templateForm.tips" style="width: 100%" placeholder="请选择" clearable>
            <el-option
              v-for="dict in dict.type.event_tips"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="其他信息" prop="other">
          <el-input v-model="templateForm.other" placeholder="其他信息备注"/>
        </el-form-item>

        <el-form-item label="排课" prop="classTime">
          <el-button type="warning" @click="templateClassOpen = true">{{ templateClassTimeText }}</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="templateFormSubmit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="排课节数详情" :style="{ minHeight: '1200px' }" :visible.sync="templateClassOpen" width="500px"
               append-to-body>
      <el-form ref="form" :model="templateForm" label-width="120px">
        <el-form-item label="需要排课节数">
          <el-input
            id="inputCount"
            type="number"
            v-model.number="inputCount"
            min="1"
            max="5"
            @blur="handleCountChange"
            class="count-input"
          />
          <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
        </el-form-item>

        <!-- 动态生成的输入框区域 -->
        <div class="dynamic-inputs">
          <div
            v-for="(item, index) in generatedInputs"
            :key="index"
            class="input-item"
          >
            <el-date-picker
              style="width: 100%"
              v-model="item.value"
              @change="timeSelectBind(index,item.value)"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :placeholder="`请选择第 ${index + 1} 节课时间`"
              size="small"
            >
            </el-date-picker>
          </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="addTemplateClassTime">确认</el-button>
        <el-button @click="templateClassOpen = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css'
import {Loading} from 'element-ui'
import {
  cancelBlog,
  cmsListBlog,
  cmsListByTagId,
  cmsListByTypeId,
  cmsListRecommend,
  getBlog,
  getBlogDetail
} from '@/api/cms/blog'

import {
  addBlog,
  updateBlog,
} from '@/api/cms/blog'

import {
  addFileBlogInfo,
} from '@/api/cms/fileBlogInfo'

import {getToken} from '@/utils/auth'
import {mapGetters} from 'vuex'
import {listAllUser} from '../../api/system/user'
import {listStudentAll} from '../../api/teach/student'
import {delFileInfo} from "@/api/cms/fileInfo";
import filesUpload from '../cms/blog/components/filesUpload.vue'
import {getUuid} from '../../api/common'
import Cookies from "js-cookie";

export default {
  name: 'cmsIndex',
  dicts: ['sys_yes_no', 'event_tips', 'event_class_type', 'event_student_status'],
  components: {
    filesUpload,
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      blogList: [],
      typeList: [],
      tagList: [],
      fullTypeList: [],
      fullTagList: [],
      recommendList: [],
      autoRefreshText: '开启自动刷新',
      timer: null,
      autoRefreshStatus: true,
      fileList: [],
      stateList: [{'id': 2, 'name': '进行中'}, {'id': 1, 'name': '已完结'}, {'id': 3, 'name': '需二次沟通'}],
      selectMethod: '事件列表',
      typeId: -1,
      tagId: -1,
      selected1: false,
      selected2: false,
      selected: false,
      moreType: true,
      moreTag: true,
      value: new Date(),
      start: false,
      screenWidth: document.documentElement.clientWidth, //实时屏幕宽度
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        query: '',
        title: null,
        content: null,
        top: null,
        status: null,
        createBy: null
      },
      tagsList: [],
      // 总条数
      isLoginState: false,
      //search
      total: 0,
      searchInput: true,
      searching: false,
      searchList: [],
      //校区
      studentList: [],
      userList: [],
      //文章新增
      title: '',
      // 类型选项
      typeOptions: [],
      // 标签选项
      tagOptions: [],
      generatedInputs: [],
      inputCount: 1, // 输入的数量，默认1
      errorMessage: '', // 错误提示信息
      // 是否显示弹出层
      open: false,
      form: {},
      templateForm: {
        classTime: []
      },
      templateOpen: false,
      templateClassOpen: false,
      templateClassTimeText: '排课',
      top: false,
      fileIds: [],
      blogFilesOpen: false,
      // 表单校验
      rules: {
        title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur'
        }],
        typeIds: [{
          required: true,
          message: '分类不能为空',
          trigger: 'change'
        }],
        tag: [{
          required: true,
          message: '请选择标签',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '分类请选择',
          trigger: 'blur'
        }],
        tagIds: [{
          required: true,
          message: '标签不能为空',
          trigger: 'blur'
        }],
        classTime: [{
          required: true,
          message: '请选择排课时间',
        }],
        studentId: [{
          required: true,
          message: '请选择校区',
          trigger: 'blur'
        }]
      },
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    'queryParams.query': {
      handler(value) {
        this.searchList = []
        // console.log(value)
        if (value === '') {
          return
        }

        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.searchBlog()
        }, 1000)
      }
    }
  },
  created() {
    this.getStudentsList()
    this.login()
    this.getBlogList()
    window.addEventListener('resize', this.screenAdapter)
  },
  mounted() {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.getTypeList()
      // 初始化生成默认数量的输入框
      this.generateInputs(this.inputCount);
      this.screenWidth = document.documentElement.clientWidth
    })
  },
  methods: {
    /** 获取内部沟通列表 */
    async getBlogList() {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      // console.log(this.queryParams)
      await cmsListBlog(this.queryParams).then(response => {
        if (response.code === 200) {
          this.blogList = this.picSrc(response.rows)
          // console.log(this.typeOptions)
          console.log(this.blogList)
        }
        this.total = response.total
      }).finally(() => {
        loadingInstance.close()
      })
    },
    // 处理数量变化
    handleCountChange() {
      // 验证输入是否在1-5范围内
      if (this.inputCount < 1 || this.inputCount > 5 || isNaN(this.inputCount)) {
        this.errorMessage = '请输入1到5之间的数字';
        return;
      }

      this.errorMessage = '';
      // 根据输入数量生成输入框
      this.generateInputs(this.inputCount);
      this.templateForm.classTime = []
    },
    // 生成指定数量的输入框
    generateInputs(count) {
      // 清空现有输入框
      this.generatedInputs = [];

      // 生成新的输入框数组
      for (let i = 0; i < count; i++) {
        this.generatedInputs.push({
          value: '' // 每个输入框的绑定值
        });
      }
    },
    timeSelectBind(key, val) {
      const classSelect = {
        number: key + 1,
        time: val
      }
      this.templateForm.classTime.push(classSelect);
    },
    searchByPeople(val, type) {
      if (type === 1) {
        if (val !== '') {
          this.selectMethod = '事件筛选:校区'
          this.queryParams.studentId = val
          this.selected = true
          this.searchByParams2()
        } else {
          this.queryParams.studentId = null
          this.searchList = []
          this.updateBlogList()
        }
      } else if (type === 2) {
        if (val !== '') {
          this.selectMethod = '事件筛选:创建人'
          this.queryParams.createId = val
          this.selected = true
          this.searchByParams2()
        } else {
          this.queryParams.createId = null
          this.searchList = []
          this.updateBlogList()
        }
      } else if (type === 3) {
        if (val !== '') {
          this.selectMethod = '事件筛选:进度'
          this.selected = true
          this.queryParams.finishState = val
          this.searchByParams2()
        } else {
          this.queryParams.finishState = null
          this.searchList = []
          this.updateBlogList()
        }
      }
    },
    searchByParams() {
      cmsListBlog(this.queryParams).then(response => {
        let listSize = response.rows.length
        if (listSize > 0) {
          for (let i = 0; i < listSize; i++) {
            response.rows[i].content = this.brightenKeyword(response.rows[i].content, this.queryParams.query)
          }
        }
        this.searchList = response.rows
        this.total = response.total
        // console.log(this.searchList)
        if (this.searchList.length !== 0) {
          this.blogList = this.picSrc(response.rows)
          this.searching = true
        }
      })
    },
    searchByParams2() {
      // console.log(this.queryParams)
      cmsListBlog(this.queryParams).then(response => {
        // console.log(response)
        this.searchList = response.rows
        this.total = response.total
        if (this.searchList.length !== 0) {
          this.blogList = this.picSrc(response.rows)
        } else {
          this.$modal.msg("未查询到数据")
          this.blogList = []
          this.searchList = []
        }
      })
    },
    //------------------------------------------------------
    checkInput() {
      this.searching = this.queryParams.query !== ''
    },
    dateChange(val) {
      // console.log(val)
      if (val === null) {
        this.updateBlogList()
        return
      }
      this.searchByParams2()
    },
    /** 查询校区信息列表 */
    getStudentsList() {
      listStudentAll().then(response => {
        // console.log(response);
        this.studentList = response.rows
      })

      listAllUser().then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.userList = res.data
        }
      })

      getBlog().then(response => {
        // console.log(response)
        this.typeOptions = response.types
        this.tagOptions = response.tags
      })
    },
    notSearching() {
      setTimeout(() => {
        this.searching = false
      }, 100)
    },
    async searchBlog() {
      let token = getToken()
      if (token == null || token === '' || token === undefined) {
        this.$modal.msgWarning("请登陆后再试")
        return
      }
      if (this.queryParams.query === '') {
        this.searching = false
        this.queryParams.content = ''
        this.updateBlogList()
      } else {
        this.queryParams.content = this.queryParams.query
        this.searchByParams()
      }
    },
    //搜索关建字标红
    brightenKeyword(val, keyword) {
      // 去掉html 标签
      // val = val.replace(/<\/?[^>]+(>|$)/g, "")
      const Reg = new RegExp(keyword, 'i')
      let res = ''
      if (val) {
        res = val.replace(Reg, `<span style="color: red;background-color: yellow">${keyword}</span>`)
        return res
      }
    },
    //------------------------------------------------------
    handleClick() {
      this.$router.push({
        path: '/cmsLogin'
      })
    },
    handleClick1() {
      this.$router.push({
        path: '/index'
      })
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
      this.$modal.msg("文件上传" + file.response.msg)
    },
    handleFileUploadProgress() {
      this.form.blogFilesNew.push(
        {
          id: getUuid(),
          fileId: '',
          fileOriginName: '',
          fileSuffix: '',
          fileSize: '',
          filePath: '',
          remark: ''
        })
    },
    handleUploadSuccess(value) {
      this.form.blogFilesNew.forEach(item => {
        if (value.code === 200) {
          item.fileId = value.fileName
          item.fileOriginName = value.fileOriginName
          item.fileSuffix = value.fileSuffix
          item.fileSize = value.fileSize
          item.filePath = value.fileName
        }
      })
    },
    getMessagePage() {
      let routeUrl = this.$router.resolve({
        path: '/cms/main/message'
      })
      window.open(routeUrl.href, '_blank')
    },
    getRecordPage() {
      this.open = true
      this.reset()
    },
    //快捷排课
    templateRecordInput() {
      this.templateOpen = true
    },
    login() {
      let token = getToken()
      if (token == null || token === '' || token === undefined) {
        this.isLoginState = false
        this.queryParams.createBy = ''
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove('rememberMe');
      } else {
        this.isLoginState = true
        let username = Cookies.get("username");
      }
    },
    //图片地址修改
    picSrc(blogList) {
      for (let i = 0; i < blogList.length; i++) {
        let blogInfo = blogList[i]
        if (blogInfo.blogPic !== null && blogInfo.blogPic.length > 0) {
          blogList[i].blogPic = process.env.VUE_APP_BASE_API + blogInfo.blogPic
        } else {
          blogList[i].blogPic = '/people_default.jpeg'
        }

        //新增
        const name = this.typeOptions.find(item => item.typeId === parseInt(blogInfo.type))
        if (name !== null && name !== undefined) {
          blogList[i].typeName = name['typeName']
        } else {
          blogList[i].typeName = ''
        }

        const name2 = this.tagOptions.find(item => item.tagId === parseInt(blogInfo.tag))
        if (name2 !== null && name2 !== undefined) {
          blogList[i].tagName = name2['tagName']
        } else {
          blogList[i].tagName = ''
        }
      }
      return blogList
    },
    compare(property) {
      return function (a, b) {
        let value1 = a[property].length
        let value2 = b[property].length
        return value2 - value1
      }
    },
    // 获取内部沟通类型列表
    async getTypeList() {
      // console.log(this.$route.query.id)
      getBlogDetail(this.$route.query.id).then(response => {
        // console.log(response)
        for (let i = 0; i < response.types.length; i++) {
          let typeInfo = response.types[i]
          if (typeInfo.typePic.length > 0) {
            response.types[i].typePic = process.env.VUE_APP_BASE_API + typeInfo.typePic
          }
        }
        this.typeList = response.types
        // this.typeList = response.types.slice(0, 4)
        this.tagList = response.tags
        // this.tagList = response.tags.slice(0, 4)
        // console.log(this.typeList)
      })
    },
    // 跳转到内部沟通详情页
    getBlogInfo(blogId) {
      let routeUrl = this.$router.resolve({
        path: '/cms/main/blog',
        query: {
          id: blogId
        }
      })
      window.open(routeUrl.href, '_blank')
    },

    // 按分类筛选
    async selectType(cmsType) {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      let token = getToken()
      if (token == null || token === '' || token === undefined) {
        this.$modal.msgWarning("请登陆后再试")
        loadingInstance.close()
        return
      }
      this.typeId = cmsType.typeId
      cmsListByTypeId(this.typeId).then(response => {
        this.blogList = this.picSrc(response.rows)
        // console.log(response)
        this.total = response.total
        this.selectMethod = '分类: ' + cmsType.typeName
        this.selected = true
        this.selected1 = true
      }).finally(() => {
        loadingInstance.close()
      })
    },
    // 按标签筛选内部沟通
    async selectTag(tag) {
      let loadingInstance = Loading.service({
        target: '.left-item'
      })
      let token = getToken()
      if (token == null || token === '' || token === undefined) {
        this.$modal.msgWarning("请登陆后再试")
        loadingInstance.close()
        return
      }
      this.tagId = tag.tagId
      cmsListByTagId(this.tagId).then(response => {
        this.blogList = this.picSrc(response.rows)
        this.total = response.total
        this.selectMethod = '标签: ' + tag.tagName
        this.selected = true
        this.selected2 = true
      }).finally(() => {
        loadingInstance.close()
      })
    },
    // 更新内部沟通列表
    updateBlogList() {
      this.selected = false
      this.selected1 = false
      this.selected2 = false
      this.typeId = -1
      this.tagId = -1
      this.selectMethod = '事件列表'
      this.getBlogList()
    },
    // 得到所有的标签
    async getFullTagList() {
      this.tagList = this.fullTagList
    },
    async dealType() {
      if (this.moreType) {
        this.typeList = this.fullTypeList
      } else {
        this.typeList = this.fullTypeList.slice(0, 4)
      }
      this.moreType = !this.moreType
    },
    async dealTag() {
      if (this.moreTag) {
        await this.getFullTagList()
      } else {
        this.tagList = this.fullTagList.slice(0, 4)
      }
      this.moreTag = !this.moreTag
    },
    // 屏幕尺寸变化的监听函数
    screenAdapter() {
      this.screenWidth = document.documentElement.clientWidth
    },
    // 取消按钮
    cancel() {
      this.$confirm('是否放弃此次编辑？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fileids = this.fileIds
        if (fileids.length > 0) {
          delFileInfo(fileids)
        }

        this.fileIds.length = 0
        cancelBlog(this.form).then(response => {
        })
        this.top = false
        this.open = false
        this.blogFilesOpen = false
        this.reset()
      }).catch(() => {
      })
    },
    getFileId(data) {
      this.fileIds.push(data)
    },
    //开启自动刷新
    enableAutoRefresh() {
      if (this.autoRefreshStatus) {
        this.autoRefreshStatus = false
        this.startTimer()
      }
    },
    startTimer() {
      let totalSeconds = 600
      this.timer = setInterval(() => {
        // 计算分钟和秒
        const minutes = Math.floor(totalSeconds / 60);
        const seconds = totalSeconds % 60;

        // 格式化输出：补零
        this.autoRefreshText = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`

        // 倒计时结束
        if (totalSeconds <= 0) {
          this.$modal.msg('正在刷新数据')
          this.resetTimer();
          this.getBlogList()
        }
        totalSeconds--;
      }, 1000)
    },

    resetTimer() {
      if (this.timer) clearInterval(this.timer);
      this.startTimer();
    },
    /* 得到所选校区的信息 */
    getSelectStudent() {
      let obj = this.studentList.find(item => item.studentId === this.form.studentId)
      this.form.studentName = obj.studentName
    },
    getSelectTemplateStudent(val) {
      let obj = this.studentList.find(item => item.studentId === val)
      this.templateForm.studentName = obj.studentName
    },
    getShowUserIds() {
      this.form.showId = this.form.showIds.join(",")
    },
    templateFormSubmit() {
      this.$refs['templateForm'].validate(valid => {
        console.log(this.templateForm)
        if (valid) {
          this.$modal.confirm('是否确认提交排课数据？').then(() => {
            this.templateForm.contentType = '2'
            this.templateForm.status = 1
            const student_status = this.selectDictLabel(this.dict.type.event_student_status, this.templateForm.student_status);
            const class_type = this.selectDictLabel(this.dict.type.event_class_type, this.templateForm.class_type);
            const yesNo = this.selectDictLabel(this.dict.type.sys_yes_no, this.templateForm.yesNo);
            const tips = this.selectDictLabel(this.dict.type.event_tips, this.templateForm.tips);

            this.templateForm.content = {
              student_status: student_status,
              class_type: class_type,
              yesNo: yesNo,
              tips: tips,
              class_time: this.templateForm.classTime,
              class_number: this.templateForm.number,
              other: this.templateForm.other
            }

            this.templateForm.content = JSON.stringify(this.templateForm.content)

            addBlog(this.templateForm).then(response => {
              // console.log(response)
              if (response.code === 200) {
                this.$modal.msgSuccess('提交成功')
                this.templateOpen = false
                this.getBlogList()
              }
            })
          })
        }
        // console.log(name)

      })
    },
    addTemplateClassTime() {
      this.templateClassOpen = false
      // console.log()
      if (this.templateForm.classTime.length > 0) {
        this.templateClassTimeText = '已排课'
      } else {
        this.templateClassTimeText = '排课'
      }
    },
    /** 提交按钮 */
    releaseForm() {
      this.$refs['form'].validate(valid => {
        // console.log(this.form)
        this.form.tag = this.form.tagIds[0]
        this.form.type = this.form.typeIds[0]
        if (valid) {
          this.$modal.confirm('是否确认提交？').then(() => {
            // this.form.type = 1
            this.form.status = 1
            if (this.top) {
              this.form.top = 1
            } else {
              this.form.top = 0
            }
            if (this.form.blogFilesNew.length > 0) {
              this.form.blogFiles = JSON.stringify(this.form.blogFilesNew)
            }

            // console.log(this.form)
            addBlog(this.form).then(response => {
              if (this.fileIds.length > 0) {
                let fileBlogInfo = {
                  blogId: response.data,
                  fileIds: this.fileIds
                }
                addFileBlogInfo(fileBlogInfo).then(response => {
                })
              }
              this.$modal.msgSuccess('提交成功')
              this.fileIds.length = 0
              this.open = false
              this.getBlogList()
            })
          })
        }
      })
    },
    /** 暂存按钮 */
    saveForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$modal.confirm('是否确认暂存？').then(() => {
            this.form.status = 0
            if (this.top) {
              this.form.top = 1
            } else {
              this.form.top = 0
            }
            if (this.form.blogFilesNew.length > 0) {
              this.form.blogFiles = JSON.stringify(this.form.blogFilesNew)
            }
            if (this.form.id != null) {
              updateBlog(this.form).then(response => {
                this.$modal.msgSuccess('暂存成功')
                this.fileIds.length = 0
                this.open = false
                this.getBlogList()
              })
            } else {
              addBlog(this.form).then(response => {
                if (this.fileIds.length > 0) {
                  let fileBlogInfo = {
                    blogId: response.data,
                    fileIds: this.fileIds
                  }
                  addFileBlogInfo(fileBlogInfo).then(response => {
                  })
                }
                this.$modal.msgSuccess('暂存成功')
                this.fileIds.length = 0
                this.open = false
                this.getBlogList()
              })
            }
          }).catch(() => {
          })
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        createBy: null,
        updateBy: null,
        title: null,
        content: null,
        top: '0',
        status: '0',
        blogDesc: null,
        blogFiles: null,
        blogPic: null,
        blogPicLink: null,
        tagIds: [],
        typeIds: [],
        blogFilesNew: [],
        contentType: '1',
        contentMarkdown: null
      }
      this.resetForm('form')
    },
  }
}
</script>

<style scoped>
.tmp {
  white-space: nowrap; /* 强制单行显示 */
  text-overflow: ellipsis; /* 超出部分省略号表示 */
  overflow: hidden; /* 超出部分隐藏 */
  width: 360px; /* 设置显示的最大宽度 */
  display: inline-block; /* 将 span 转换为行内块级元素 */
}

.no-scrollbar ::v-deep .el-textarea__inner {
  /* Chrome, Safari and Opera */

  &::-webkit-scrollbar {
    display: none;
  }

  font-weight: bold;
  font-size: 10px;
  /* IE and Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
}

:root {
  --primary: #4285f4; /* 主色调 - 蓝色 */
  --primary-dark: #3367d6; /* 主色调加深 - 深蓝色 */
}

.badge {
  position: absolute;
  left: 160px;
  bottom: 30px;
}

.badge /deep/ .el-badge__content {
  width: 80px !important;
  height: 40px !important;
  font-size: 18px !important;
  line-height: 40px !important;
  padding: 0 !important;
}

.search_input {
  position: relative;
  box-sizing: border-box;
}

.search_input ul {
  position: absolute;
  top: 30px;
  width: 100%;
  border: 1px solid #e5e9ef;
  margin-top: 1px;
  background: #fff;
  z-index: 10000;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(58, 118, 142, 0.16);
  padding: 10px 0;
  font-size: 14px;
  box-sizing: border-box;
}

.search_input ul li {
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-all;
  display: block;
  color: #222;
  position: relative;
  /*transition: .2 ease;*/
}

.search_input ul li:hover {
  background-color: #e8f3ff;
}

/* 按钮容器样式 */
.fixed {
  position: fixed; /* 固定定位 */
}

.bottom-6 {
  bottom: 1.5rem; /* 距离底部24px (1rem = 16px) */
}

.right-6 {
  right: 1.5rem; /* 距离右侧24px */
}

.z-50 {
  z-index: 50; /* 层级较高，确保显示在最上层 */
}

/* 按钮样式 */
.w-14 {
  width: 7.0rem; /* 宽度56px */
}

.h-14 {
  height: 3.5rem; /* 高度56px */
}

.bg-primary {
  background-color: var(--primary); /* 使用主色调 */
}

.text-white {
  color: black; /* 文字颜色为白色 */
}

.rounded-full {
  border-radius: 9999px; /* 完全圆角，形成圆形 */
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 较大阴影 */
}

.flex {
  display: flex; /* 弹性布局 */
}

.items-center {
  align-items: center; /* 垂直居中 */
}

.justify-center {
  justify-content: center; /* 水平居中 */
}

/* 过渡动画 */
.transition-all {
  transition-property: all; /* 所有属性变化都应用过渡 */
}

.duration-300 {
  transition-duration: 300ms; /* 过渡时间300毫秒 */
}

/* 悬停效果 */
.hover\:bg-primary-dark:hover {
  background-color: var(--primary-dark); /* 悬停时使用加深的主色调 */
}

.hover\:scale-110:hover {
  transform: scale(1.1); /* 悬停时放大10% */
}

/* 焦点状态 */
.focus\:outline-none:focus {
  outline: none; /* 移除默认焦点轮廓 */
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px; /* 添加2px的环 */
}

.focus\:ring-primary:focus {
  box-shadow: 0 0 0 2px var(--primary); /* 环的颜色为主色调 */
}

.focus\:ring-opacity-50:focus {
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.5); /* 环的透明度为50% */
}

/* 旋转效果 */
.rotate-45 {
  transform: rotate(45deg); /* 旋转45度 */
}

.welcome {
  background-color: rgba(0, 0, 0, 0.1);
  border: none;
  height: 90%;
  position: relative;
}

.border {
  width: 812px;
  height: 112px;
  position: absolute;
  top: -6px;
  left: -6px;
  border: 3px solid white;
  box-sizing: border-box;
  animation: clipMe 5s linear infinite;
}

.tit {
  box-sizing: border-box;
  position: relative;
  width: 800px;
  height: 100px;
  line-height: 100px;
  box-shadow: inset 0 0 0 1px white;
  margin: 40px auto;
  margin-top: 80px;
  color: white;
  text-align: center;
  font-size: 50px;
  font-weight: normal;
  letter-spacing: 10px;
}

.eventCompleted {
  color: #818389;
}

.eventCompletedInput ::v-deep .el-textarea__inner {
  color: #818389;
}

.eventCompletedLine {
  text-decoration: line-through
}

.eventCompletedLineInput ::v-deep .el-textarea__inner {
  text-decoration: line-through
}

.down {
  animation: bounce 2s infinite;
  animation-duration: 3s;
  font-size: 25px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.down:hover {
  animation: none;
  cursor: pointer;
  box-shadow: 0 0 20px 0 white;
  transition: all .2s;
}

.left-item .pagination-container {
  background: rgb(255, 255, 255, 0)
}

@keyframes clipMe {

  0%,
  100% {
    clip: rect(0px, 806px, 6px, 0px);
  }

  25% {
    clip: rect(0px, 6px, 112px, 0px);
  }

  50% {
    clip: rect(112px, 812px, 112px, 0px);
  }

  75% {
    clip: rect(0px, 812px, 112px, 806px);
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }

  40% {
    transform: translate(-50%, -30px);
  }

  60% {
    transform: translate(-50%, -15px);
  }
}


.blog-type-ul {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}

.el-pagination {
  padding-bottom: 20px;
}


.el-card /deep/ .el-card__body {
  padding: 0;
}


.right-item {
  margin-bottom: 20px;
}

.blog-type-li:first-child {
  border-top: 1px solid rgba(179, 216, 255, 0.5);
}

.blog-type-li {
  border-bottom: 1px solid rgba(179, 216, 255, 0.5);
}

.more {
  text-align: center;
  color: #3a8ee6;
  padding: 8px;
}

.more:hover {
  cursor: pointer;
  color: #3a8ee6;
}

.blog-type-li:hover {
  background-color: rgba(213, 255, 255, 0.3);
  cursor: pointer;
}

.activeType {
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px 13px 0;
  border-bottom: 1px solid rgba(179, 216, 255, 0.5);

}

.tag-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.tag {
  background-color: #ecf5ff;
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  font-size: 10px;
  color: #409eff;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #409eff;
  transition: .2s;
}

.sjx-outer {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #409eff;
  position: relative;
  transition: .2s;
}

.sjx-inner {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #ecf5ff;
  top: -6px;
  left: 1px;
  position: absolute;
  transition: .2s;
}

.tag-item:hover,
.activeTag {
  box-sizing: border-box;
}

.tag {
  color: white;
  background-color: #409eff;
  cursor: pointer;
}

.sjx-inner {
  border-right: 6px solid #409eff;
}

.blog-type-li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
}

.recommend-blog {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}

.recommend-a {
  border-bottom: 1px solid rgba(34, 36, 38, .15);
  line-height: 40px;
  display: block;
  text-decoration: none;
  color: black;
}

.recommend-a:hover {
  color: #3a8ee6;
}

.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.titleIndex {
  display: flex;
  align-items: center;
}

.el-icon-back {
  font-weight: bolder;
  color: #3a8ee6;
  margin-right: 10px;
}

.el-icon-back:hover {
  cursor: pointer;
}

.blog-content:hover {
  border-left: 5px solid #3a8ee6;
  border-right: 5px solid #3a8ee6;
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}

.blog-content {
  padding: 10px;
  height: auto;
  border-bottom: 1px solid rgb(199, 163, 92);
  /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
  transition: .3s;
}

.el-image {
  border-radius: 5px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.blog-info {
  display: -webkit-box;
  align-items: center;
  font-size: 10px;
}

.content-class {
  float: right;
  margin-right: 15px;
}

.blog-type {
  float: right;
  margin-left: auto;
}

.blog-tag {
  float: right;
  margin-left: auto;
}

.dynamic-inputs {
  margin-bottom: 25px;
}

.input-item {
  margin-bottom: 15px;
}

.error-message {
  color: #e74c3c;
  margin-top: 8px;
  font-size: 14px;
  margin-bottom: 0;
}
</style>
